.weather_wrap {
  width: 100%;
  background-color: #88a3d7;
  border-radius: 15px;
  margin: 0 auto;
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
  color: #fff;
  font-family: STKaiti;
  box-shadow: 0 0 30px #dbdbdb;
  // 天气动画效果代码
  .cloud_box {
    width: 300px;
    height: 180px;
    display: block;
    //background-color: #2ecc71;
    margin: 0 30px 0 0;
    position: relative;

    /* SUNNY */
    .sunny {
      -webkit-animation: sunny 15s linear infinite;
      animation: sunny 15s linear infinite;
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      height: 280px;
      width: 40px;
      margin-left: -15px;
      position: absolute;
      left: 150px;
      top: -50px;
    }

    .sunny:before {
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      content: '';
      height: 280px;
      width: 40px;
      opacity: 1;
      position: absolute;
      bottom: 0px;
      left: 0px;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .sunny:after {
      background: #FFEE44;
      border-radius: 50%;
      box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 30px;
      content: '';
      height: 160px;
      width: 160px;
      position: absolute;
      left: -60px;
      top: 60px;
    }

    @-webkit-keyframes sunny {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes sunny {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    /* CLOUDY */
    .cloudy {
      -webkit-animation: cloudy 5s ease-in-out infinite;
      animation: cloudy 5s ease-in-out infinite;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: #FFFFFF 130px -30px 0 -10px,
      #FFFFFF 50px -50px,
      #FFFFFF 60px 20px,
      #FFFFFF 120px 30px 0 -20px,
      #FFFFFF 170px 10px 0 -10px;
      height: 100px;
      width: 100px;
      margin-left: -60px;
      position: absolute;
      left: 100px;
      top: 10px;
    }

    .cloudy:after {
      -webkit-animation: cloudy_shadow 5s ease-in-out infinite;
      animation: cloudy_shadow 5s ease-in-out infinite;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 30px;
      width: 240px;
      opacity: 0.2;
      position: absolute;
      left: 10px;
      bottom: -100px;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    @-webkit-keyframes cloudy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @keyframes cloudy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @-webkit-keyframes cloudy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: .05;
      }
    }
    @keyframes cloudy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: .05;
      }
    }

    /* RAINY */
    .rainy {
      -webkit-animation: rainy 5s ease-in-out infinite 1s;
      animation: rainy 5s ease-in-out infinite 1s;
      background: #CCCCCC;
      border-radius: 50%;
      box-shadow: #CCCCCC 130px -30px 0 -10px,
      #CCCCCC 50px -50px,
      #CCCCCC 60px 20px,
      #CCCCCC 120px 30px 0 -20px,
      #CCCCCC 170px 10px 0 -10px;
      display: block;
      height: 100px;
      width: 100px;
      margin-left: -60px;
      position: absolute;
      left: 100px;
      top: 10px;
    }

    .rainy:after {
      -webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
      animation: rainy_shadow 5s ease-in-out infinite 1s;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 30px;
      width: 240px;
      opacity: 0.2;
      position: absolute;
      left: 10px;
      bottom: -100px;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .rainy:before {
      //-webkit-animation: rainy_rain .7s infinite linear;
      animation: rainy_rain 1s infinite linear;
      content: '';
      background: #CCCCCC;
      border-radius: 50%;
      display: block;
      height: 12px;
      width: 6px;
      opacity: 0.3;
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }

    //@-webkit-keyframes rainy {
    //  50% {
    //    -webkit-transform: translateY(-20px);
    //    transform: translateY(-20px);
    //  }
    //}
    @keyframes rainy {
      50% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
      }
    }
    //@-webkit-keyframes rainy_shadow {
    //  50% {
    //    -webkit-transform: translateY(20px) scale(1);
    //    transform: translateY(20px) scale(1);
    //    opacity: 0.05;
    //  }
    //}
    @keyframes rainy_shadow {
      50% {
        -webkit-transform: translateY(40px) scale(1);
        transform: translateY(40px) scale(1);
        opacity: 0.05;
      }
    }
    //@-webkit-keyframes rainy_rain {
    //  0% {
    //    box-shadow: rgba(0, 0, 0, 0) 30px 30px,
    //    rgba(0, 0, 0, 0) 40px 40px,
    //    #000 50px 75px,
    //    #000 55px 50px,
    //    #000 70px 100px,
    //    #000 80px 95px,
    //    #000 110px 45px,
    //    #000 90px 35px;
    //  }
    //  25% {
    //    box-shadow: #000 30px 45px,
    //    #000 40px 60px,
    //    #000 50px 90px,
    //    #000 55px 65px,
    //    rgba(0, 0, 0, 0) 70px 120px,
    //    rgba(0, 0, 0, 0) 80px 120px,
    //    #000 110px 70px,
    //    #000 90px 60px;
    //  }
    //  26% {
    //    box-shadow: #000 30px 45px,
    //    #000 40px 60px,
    //    #000 50px 90px,
    //    #000 55px 65px,
    //    rgba(0, 0, 0, 0) 70px 40px,
    //    rgba(0, 0, 0, 0) 80px 20px,
    //    #000 110px 70px,
    //    #000 90px 60px;
    //  }
    //  50% {
    //    box-shadow: #000 30px 70px,
    //    #000 40px 80px,
    //    rgba(0, 0, 0, 0) 50px 100px,
    //    #000 55px 80px,
    //    #000 70px 60px,
    //    #000 80px 45px,
    //    #000 110px 95px,
    //    #000 90px 85px;
    //  }
    //  51% {
    //    box-shadow: #000 30px 70px,
    //    #000 40px 80px,
    //    rgba(0, 0, 0, 0) 50px 45px,
    //    #000 55px 80px,
    //    #000 70px 60px,
    //    #000 80px 45px,
    //    #000 110px 95px,
    //    #000 90px 85px;
    //  }
    //  75% {
    //    box-shadow: #000 30px 95px,
    //    #000 40px 100px,
    //    #000 50px 60px,
    //    rgba(0, 0, 0, 0) 55px 95px,
    //    #000 70px 80px,
    //    #000 80px 70px,
    //    rgba(0, 0, 0, 0) 110px 120px,
    //    rgba(0, 0, 0, 0) 90px 110px;
    //  }
    //  76% {
    //    box-shadow: #000 30px 95px,
    //    #000 40px 100px,
    //    #000 50px 60px,
    //    rgba(0, 0, 0, 0) 55px 35px,
    //    #000 70px 80px,
    //    #000 80px 70px,
    //    rgba(0, 0, 0, 0) 110px 25px,
    //    rgba(0, 0, 0, 0) 90px 15px;
    //  }
    //  100% {
    //    box-shadow: rgba(0, 0, 0, 0) 30px 120px,
    //    rgba(0, 0, 0, 0) 40px 120px,
    //    #000 50px 75px,
    //    #000 55px 50px,
    //    #000 70px 100px,
    //    #000 80px 95px,
    //    #000 110px 45px,
    //    #000 90px 35px;
    //  }
    //}
    @keyframes rainy_rain {
      0% {
        box-shadow: rgba(0, 0, 0, 0) 60px 60px,
        rgba(0, 0, 0, 0) 80px 80px,
        #000 100px 150px,
        #000 110px 100px,
        #000 140px 200px,
        #000 160px 190px,
        #000 220px 90px,
        #000 180px 70px;
      }
      25% {
        box-shadow: #000 60px 90px,
        #000 80px 120px,
        #000 100px 180px,
        #000 110px 130px,
        rgba(0, 0, 0, 0) 140px 240px,
        rgba(0, 0, 0, 0) 160px 240px,
        #000 220px 140px,
        #000 180px 120px;
      }
      26% {
        box-shadow: #000 60px 90px,
        #000 80px 120px,
        #000 100px 180px,
        #000 110px 130px,
        rgba(0, 0, 0, 0) 140px 80px,
        rgba(0, 0, 0, 0) 160px 40px,
        #000 220px 140px,
        #000 180px 120px;
      }
      50% {
        box-shadow: #000 60px 140px,
        #000 80px 160px,
        rgba(0, 0, 0, 0) 100px 200px,
        #000 110px 160px,
        #000 140px 120px,
        #000 160px 90px,
        #000 220px 190px,
        #000 180px 170px;
      }
      51% {
        box-shadow: #000 60px 140px,
        #000 80px 160px,
        rgba(0, 0, 0, 0) 100px 90px,
        #000 110px 160px,
        #000 140px 120px,
        #000 160px 90px,
        #000 220px 190px,
        #000 180px 170px;
      }
      75% {
        box-shadow: #000 60px 190px,
        #000 80px 200px,
        #000 100px 120px,
        rgba(0, 0, 0, 0) 110px 190px,
        #000 140px 160px,
        #000 160px 140px,
        rgba(0, 0, 0, 0) 220px 240px,
        rgba(0, 0, 0, 0) 180px 220px;
      }
      76% {
        box-shadow: #000 60px 190px,
        #000 80px 200px,
        #000 100px 120px,
        rgba(0, 0, 0, 0) 110px 70px,
        #000 140px 160px,
        #000 160px 140px,
        rgba(0, 0, 0, 0) 220px 50px,
        rgba(0, 0, 0, 0) 180px 30px;
      }
      100% {
        box-shadow: rgba(0, 0, 0, 0) 60px 240px,
        rgba(0, 0, 0, 0) 80px 240px,
        #000 100px 150px,
        #000 110px 100px,
        #000 140px 200px,
        #000 160px 190px,
        #000 220px 90px,
        #000 180px 70px;
      }
    }

    /* RAINBOW */
    .rainbow {
      -webkit-animation: rainbow 5s ease-in-out infinite;
      animation: rainbow 5s ease-in-out infinite;
      border-radius: 340px 0 0 0;
      box-shadow: #FB323C -4px -4px 0 2px,
      #F99716 -8px -8px 0 6px,
      #FEE124 -12px -12px 0 10px,
      #AFDF2E -16px -16px 0 14px,
      #6AD7F8 -20px -20px 0 18px,
      #60B1F5 -24px -24px 0 22px,
      #A3459B -28px -28px 0 26px;
      height: 140px;
      width: 140px;
      margin-left: -40px;
      position: absolute;
      left: 140px;
      top: 11px;
      -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg);
    }

    .rainbow:after {
      -webkit-animation: rainbow_shadow 5s ease-in-out infinite;
      animation: rainbow_shadow 5s ease-in-out infinite;
      background: #000000;
      border-radius: 50%;
      content: '';
      opacity: 0.2;
      height: 30px;
      width: 200px;
      position: absolute;
      bottom: -23px;
      left: 40px;
      -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      transform: rotate(-40deg);
      -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    @-webkit-keyframes rainbow {
      50% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
      }
    }
    @keyframes rainbow {
      50% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
      }
    }
    @-webkit-keyframes rainbow_shadow {
      50% {
        -webkit-transform: rotate(-50deg) translate(10px) scale(.7);
        transform: rotate(-50deg) translate(10px) scale(.7);
        opacity: 0.05;
      }
    }
    @keyframes rainbow_shadow {
      50% {
        -webkit-transform: rotate(-50deg) translate(10px) scale(.7);
        transform: rotate(-50deg) translate(10px) scale(.7);
        opacity: 0.05;
      }
    }

    /* STARRY */
    .starry {
      -webkit-animation: starry_star 5s ease-in-out infinite;
      animation: starry_star 5s ease-in-out infinite;
      background: #fff;
      border-radius: 50%;
      box-shadow: #FFFFFF 50px 14px 0 -2px,
      rgba(255,255,255,0.1) -70px -40px 0 -2px,
      rgba(255,255,255,0.1) -102px -70px 0 -2px,
      #FFFFFF -104px -124px 0 -2px,
      #FFFFFF 56px -144px,
      rgba(255, 255, 255, 0.1) 82px -38px,
      #FFFFFF 68px -100px,
      rgba(255, 255, 255, 0.1) 28px -142px 0 -2px,
      #FFFFFF 128px -41px 0 -2px,
      rgba(255, 255, 255, 0.1) 62px -165px 0 -2px,
      #FFFFFF 124px -180px,
      rgba(255, 255, 255, 0.1) 120px -127px 0 -2px,
      #FFFFFF 64px -247px,
      rgba(255,255,255,0.1) -46px -203px 0 -2px;
      height: 8px;
      width: 8px;
      margin-left: -10px;
      opacity: 1;
      position: absolute;
      left: 120px;
      top: 140px;
    }

    .starry:after {
      -webkit-animation: starry 5s ease-in-out infinite;
      animation: starry 5s ease-in-out infinite;
      border-radius: 50%;
      box-shadow: #FFFFFF -25px 0;
      content: '';
      height: 150px;
      width: 150px;
      position: absolute;
      top: -106px;
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg);
      -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
      transform-origin: 0 50%;
    }

    @-webkit-keyframes starry {
      50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
    }

    @keyframes starry {
      50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
    }
    @-webkit-keyframes starry_star {
      50% {
        box-shadow: rgba(255, 255, 255, 0.1) 46px 14px 0 -1px,
        #FFFFFF -36px -19px 0 -1px,
        #FFFFFF -51px -34px 0 -1px,
        rgba(255,255,255,0.1) -52px -62px 0 -1px,
        rgba(255, 255, 255, 0.1) 14px -37px,
        #FFFFFF 41px -19px,
        rgba(255, 255, 255, 0.1) 34px -50px,
        #FFFFFF 14px -71px 0 -1px,
        rgba(255, 255, 255, 0.1) 64px -21px 0 -1px,
        #FFFFFF 32px -85px 0 -1px,
        rgba(255, 255, 255, 0.1) 64px -90px,
        #FFFFFF 60px -67px 0 -1px,
        rgba(255, 255, 255, 0.1) 34px -127px,
        #FFFFFF -26px -103px 0 -1px;
      }
    }
    @keyframes starry_star {
      50% {
        box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
        #FFFFFF -36px -19px 0 -1px,
        #FFFFFF -51px -34px 0 -1px,
        rgba(255,255,255,0.1) -52px -62px 0 -1px,
        rgba(255, 255, 255, 0.1) 14px -37px,
        #FFFFFF 41px -19px,
        rgba(255, 255, 255, 0.1) 34px -50px,
        #FFFFFF 14px -71px 0 -1px,
        rgba(255, 255, 255, 0.1) 64px -21px 0 -1px,
        #FFFFFF 32px -85px 0 -1px,
        rgba(255, 255, 255, 0.1) 64px -90px,
        #FFFFFF 60px -67px 0 -1px,
        rgba(255, 255, 255, 0.1) 34px -127px,
        #FFFFFF -26px -103px 0 -1px;
      }
    }

    /* STORMY */
    .stormy {
      -webkit-animation: stormy 5s ease-in-out infinite;
      animation: stormy 5s ease-in-out infinite;
      background: #222222;
      border-radius: 50%;
      box-shadow: #222222 130px -30px 0 -10px,
      #222222 50px -50px,
      #222222 60px 20px,
      #222222 120px 30px 0 -20px,
      #222222 170px 10px 0 -10px;
      height: 100px;
      width: 100px;
      margin-left: -60px;
      position: absolute;
      left: 110px;
      top: 0px;
    }

    .stormy:after {
      -webkit-animation: stormy_shadow 5s ease-in-out infinite;
      animation: stormy_shadow 5s ease-in-out infinite;
      background: #000;
      border-radius: 50%;
      content: '';
      height: 30px;
      width: 240px;
      opacity: 0.2;
      position: absolute;
      left: 10px;
      bottom: -100px;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .stormy:before {
      -webkit-animation: stormy_thunder 2s steps(1, end) infinite;
      animation: stormy_thunder 2s steps(1, end) infinite;
      border-left: 0px solid transparent;
      border-right: 14px solid transparent;
      border-top: 86px solid yellow;
      box-shadow: yellow -14px -64px;
      content: '';
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      left: 124px;
      top: 120px;
      -webkit-transform: rotate(14deg);
      -ms-transform: rotate(14deg);
      transform: rotate(14deg);
      -webkit-transform-origin: 50% -60px;
      -ms-transform-origin: 50% -60px;
      transform-origin: 50% -60px;
    }

    @-webkit-keyframes stormy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @keyframes stormy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @-webkit-keyframes stormy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
      }
    }
    @keyframes stormy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
      }
    }
    @-webkit-keyframes stormy_thunder {
      0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        opacity: 1;
      }
      5% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 1;
      }
      10% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      15% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 0;
      }
    }
    @keyframes stormy_thunder {
      0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        opacity: 1;
      }
      5% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 1;
      }
      10% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      15% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 0;
      }
    }

    /* SNOWY */
    .snowy {
      -webkit-animation: snowy 5s ease-in-out infinite 1s;
      animation: snowy 5s ease-in-out infinite 1s;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: #FFFFFF 65px -15px 0 -5px,
      #FFFFFF 25px -25px,
      #FFFFFF 30px 10px,
      #FFFFFF 60px 15px 0 -10px,
      #FFFFFF 85px 5px 0 -5px;
      display: block;
      height: 50px;
      width: 50px;
      margin-left: -60px;
      position: absolute;
      left: 112px;
      top: 70px;
    }

    .snowy:after {
      -webkit-animation: snowy_shadow 5s ease-in-out infinite 1s;
      animation: snowy_shadow 5s ease-in-out infinite 1s;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 15px;
      width: 120px;
      opacity: 0.2;
      position: absolute;
      left: 8px;
      bottom: -60px;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .snowy:before {
      -webkit-animation: snowy_snow 2s infinite linear;
      animation: snowy_snow 2s infinite linear;
      content: '';
      border-radius: 50%;
      display: block;
      height: 7px;
      width: 7px;
      opacity: 0.8;
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }

    @-webkit-keyframes snowy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @keyframes snowy {
      50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }
    }
    @-webkit-keyframes snowy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
      }
    }
    @keyframes snowy_shadow {
      50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
      }
    }
    @-webkit-keyframes snowy_snow {
      0% {
        box-shadow: rgba(238, 238, 238, 0) 30px 30px,
        rgba(238, 238, 238, 0) 40px 40px,
        #EEEEEE 50px 75px,
        #EEEEEE 55px 50px,
        #EEEEEE 70px 100px,
        #EEEEEE 80px 95px,
        #EEEEEE 110px 45px,
        #EEEEEE 90px 35px;
      }
      25% {
        box-shadow: #EEEEEE 30px 45px,
        #EEEEEE 40px 60px,
        #EEEEEE 50px 90px,
        #EEEEEE 55px 65px,
        rgba(238, 238, 238, 0) 70px 120px,
        rgba(238, 238, 238, 0) 80px 120px,
        #EEEEEE 110px 70px,
        #EEEEEE 90px 60px;
      }
      26% {
        box-shadow: #EEEEEE 30px 45px,
        #EEEEEE 40px 60px,
        #EEEEEE 50px 90px,
        #EEEEEE 55px 65px,
        rgba(238, 238, 238, 0) 70px 40px,
        rgba(238, 238, 238, 0) 80px 20px,
        #EEEEEE 110px 70px,
        #EEEEEE 90px 60px;
      }
      50% {
        box-shadow: #EEEEEE 30px 70px,
        #EEEEEE 40px 80px,
        rgba(238, 238, 238, 0) 50px 100px,
        #EEEEEE 55px 80px,
        #EEEEEE 70px 60px,
        #EEEEEE 80px 45px,
        #EEEEEE 110px 95px,
        #EEEEEE 90px 85px;
      }
      51% {
        box-shadow: #EEEEEE 30px 70px,
        #EEEEEE 40px 80px,
        rgba(238, 238, 238, 0) 50px 45px,
        #EEEEEE 55px 80px,
        #EEEEEE 70px 60px,
        #EEEEEE 80px 45px,
        #EEEEEE 110px 95px,
        #EEEEEE 90px 85px;
      }
      75% {
        box-shadow: #EEEEEE 30px 95px,
        #EEEEEE 40px 100px,
        #EEEEEE 50px 60px,
        rgba(238, 238, 238, 0) 55px 95px,
        #EEEEEE 70px 80px,
        #EEEEEE 80px 70px,
        rgba(238, 238, 238, 0) 110px 120px,
        rgba(238, 238, 238, 0) 90px 110px;
      }
      76% {
        box-shadow: #EEEEEE 30px 95px,
        #EEEEEE 40px 100px,
        #EEEEEE 50px 60px,
        rgba(238, 238, 238, 0) 55px 35px,
        #EEEEEE 70px 80px,
        #EEEEEE 80px 70px,
        rgba(238, 238, 238, 0) 110px 25px,
        rgba(238, 238, 238, 0) 90px 15px;
      }
      100% {
        box-shadow: rgba(238, 238, 238, 0) 30px 120px,
        rgba(238, 238, 238, 0) 40px 120px,
        #EEEEEE 50px 75px,
        #EEEEEE 55px 50px,
        #EEEEEE 70px 100px,
        #EEEEEE 80px 95px,
        #EEEEEE 110px 45px,
        #EEEEEE 90px 35px;
      }
    }
    @keyframes snowy_snow {
      0% {
        box-shadow: rgba(238, 238, 238, 0) 30px 30px,
        rgba(238, 238, 238, 0) 40px 40px,
        #EEEEEE 50px 75px,
        #EEEEEE 55px 50px,
        #EEEEEE 70px 100px,
        #EEEEEE 80px 95px,
        #EEEEEE 110px 45px,
        #EEEEEE 90px 35px;
      }
      25% {
        box-shadow: #EEEEEE 30px 45px,
        #EEEEEE 40px 60px,
        #EEEEEE 50px 90px,
        #EEEEEE 55px 65px,
        rgba(238, 238, 238, 0) 70px 120px,
        rgba(238, 238, 238, 0) 80px 120px,
        #EEEEEE 110px 70px,
        #EEEEEE 90px 60px;
      }
      26% {
        box-shadow: #EEEEEE 30px 45px,
        #EEEEEE 40px 60px,
        #EEEEEE 50px 90px,
        #EEEEEE 55px 65px,
        rgba(238, 238, 238, 0) 70px 40px,
        rgba(238, 238, 238, 0) 80px 20px,
        #EEEEEE 110px 70px,
        #EEEEEE 90px 60px;
      }
      50% {
        box-shadow: #EEEEEE 30px 70px,
        #EEEEEE 40px 80px,
        rgba(238, 238, 238, 0) 50px 100px,
        #EEEEEE 55px 80px,
        #EEEEEE 70px 60px,
        #EEEEEE 80px 45px,
        #EEEEEE 110px 95px,
        #EEEEEE 90px 85px;
      }
      51% {
        box-shadow: #EEEEEE 30px 70px,
        #EEEEEE 40px 80px,
        rgba(238, 238, 238, 0) 50px 45px,
        #EEEEEE 55px 80px,
        #EEEEEE 70px 60px,
        #EEEEEE 80px 45px,
        #EEEEEE 110px 95px,
        #EEEEEE 90px 85px;
      }
      75% {
        box-shadow: #EEEEEE 30px 95px,
        #EEEEEE 40px 100px,
        #EEEEEE 50px 60px,
        rgba(238, 238, 238, 0) 55px 95px,
        #EEEEEE 70px 80px,
        #EEEEEE 80px 70px,
        rgba(238, 238, 238, 0) 110px 120px,
        rgba(238, 238, 238, 0) 90px 110px;
      }
      76% {
        box-shadow: #EEEEEE 30px 95px,
        #EEEEEE 40px 100px,
        #EEEEEE 50px 60px,
        rgba(238, 238, 238, 0) 55px 35px,
        #EEEEEE 70px 80px,
        #EEEEEE 80px 70px,
        rgba(238, 238, 238, 0) 110px 25px,
        rgba(238, 238, 238, 0) 90px 15px;
      }
      100% {
        box-shadow: rgba(238, 238, 238, 0) 30px 120px,
        rgba(238, 238, 238, 0) 40px 120px,
        #EEEEEE 50px 75px,
        #EEEEEE 55px 50px,
        #EEEEEE 70px 100px,
        #EEEEEE 80px 95px,
        #EEEEEE 110px 45px,
        #EEEEEE 90px 35px;
      }
    }

    body {
      font-family: sans-serif;
      background: #f5f5f5;
      margin: 0;
    }

    h1 {
      text-align: center;
      font-weight: 400;
      position: absolute;
      width: 100%;
      font-size: 15px;
      top: 50%;
      margin-top: -130px;
      opacity: .6;
      letter-spacing: 6px;
    }

    #fabrizio {
      border-top: 100px solid black;
      border-right: 63px solid transparent;
      width: 0;
      -webkit-transform: scale(.33);
      -ms-transform: scale(.33);
      transform: scale(.33);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      margin: 20px;
      opacity: .6
    }

    #fabrizio:before {
      background: black;
      width: 20px;
      height: 30px;
      content: '';
      display: block;
      -webkit-transform: skewX(-32deg);
      -ms-transform: skewX(-32deg);
      transform: skewX(-32deg);
      position: relative;
      top: -64px;
      left: 30px;
    }

    #fabrizio:after {
      background: black;
      width: 40px;
      height: 36px;
      content: '';
      display: block;
      -webkit-transform: skewX(-32deg);
      -ms-transform: skewX(-32deg);
      transform: skewX(-32deg);
      position: relative;
      top: -130px;
      left: 50px;
    }


    //.cloudy{
    //  width: 50px;
    //  height: 50px;
    //  position: absolute;
    //  //top: 0px;
    //  left: 80px;
    //  margin-left: -60px;
    //  background: #FFFFFF;
    //  border-radius: 50%;
    //  box-shadow: #FFFFFF 65px -10px 0 -5px,
    //  #FFFFFF 25px -25px,
    //  #FFFFFF 30px 10px,
    //  #FFFFFF 60px 15px  0 -10px,
    //  #FFFFFF 85px 5px 0 -5px;
    //  animation: cloudy 5s ease-in-out infinite;
    //}
    //@keyframes cloudy{
    //  50%{
    //    transform: translateY(-20px);
    //  }
    //}
    //.cloudy::after{
    //  content: '';
    //  width: 120px;
    //  height: 15px;
    //  position: absolute;
    //  bottom: -60px;
    //  left: 5px;
    //  background: #000;
    //  border-radius: 50%;
    //  opacity: 0.2;
    //  animation: cloudy-shadow 5s ease-in-out infinite;
    //  transform: scale(0.7);
    //}
    //
    //@keyframes cloudy-shadow{
    //  50%{
    //    transform: translateY(20px) scale(1);
    //    opacity: 0.05;
    //  }
    //}
  }

  .cloud_tip {
    text-align: right;
    padding-top: 20px;
    padding-right: 30px;
    font-size: 34px;

    .tip_rad_span {
      font-size: 30px;
      display: inline-block;

      &._span {
        font-size: 70px;
        padding-right: 10px;
      }
    }

    .cloud_tip_lr {
      font-size: 26px;
    }
  }

  .cloud_foot {
    padding: 20px;
    font-size: 28px;
  }
}
